<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码信息生成</title>
    <script src="src/jquery.min.js"></script>
    <link href="src/css/ax.css" rel="stylesheet" type="text/css">
    <link href="src/css/ax-response.css" rel="stylesheet" type="text/css">

    <script src="./src/jquery.qrcode.min.js"></script>
</head>

<body>
    
    <br>

    <form id="form">
        <div class="ax-form-group">
            <div class="ax-flex-row">
                <div class="ax-form-label">姓名</div>
                <div class="ax-form-con">
                    <div class="ax-form-input"><input type="text" id="nameInput"><span class="ax-pos-right"><a href="###"
                                class="ax-iconfont ax-icon-close" clear></a></span></div>
                </div>
            </div>
            <br>

            <div class="ax-flex-row">
                <div class="ax-form-label">身份证号</div>
                <div class="ax-form-con">
                    <div class="ax-form-input"><input type="text" id="idCardInput"><span class="ax-pos-right"><a href="###"
                                class="ax-iconfont ax-icon-close" clear></a></span></div>
                </div>
            </div>
            <br>

            <div class="ax-flex-row">
                <div class="ax-form-label">电话</div>
                <div class="ax-form-con">
                    <div class="ax-form-input"><input type="text" id="telInput"><span class="ax-pos-right"><a href="###"
                                class="ax-iconfont ax-icon-close" clear></a></span></div>
                </div>
            </div>
            <br>

            <div class="ax-flex-row">
                <div class="ax-form-label"></div>
                <div class="ax-flex-block">
                    <div class="ax-form-input"><button id="button" type="button" class="ax-btn ax-primary ax-full">生成</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <br>

    <table class="ax-table">
        <thead>
            <tr>
                <th>信息二维码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>姓名码</td>
            </tr>
            <tr>
                <td id="NameQrcode"></td>
            </tr>
            <tr>
                <td>身份证号</td>
            </tr>
            <tr>
                <td id="IdCardQrcode"></td>
            </tr>
            <tr>
                <td>电话</td>
            </tr>
            <tr>
                <td id="TelQrcode"></td>
            </tr>
        </tbody>
    </table>
    
    

</body>
<script src="src/js/ax.js"></script>
<script>
    function toUtf8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
    window.onload = function(){
            $("#button").click(function(){
                var name = $('#nameInput').val();
                var idCard = $('#idCardInput').val();
                var tel = $('#telInput').val();
                if (name == "" || idCard == "" || tel == ""){
                    alert("请完整输入信息!");
                    return
                }
                jQuery('#NameQrcode').qrcode({
                    render: "canvas",
                    width: 150, //宽度
                    height:150, //高度
                    text: toUtf8(name)
                });
                jQuery('#IdCardQrcode').qrcode({
                    render: "canvas",
                    width: 150, //宽度
                    height:150, //高度
                    text: toUtf8(idCard)
                });
                jQuery('#TelQrcode').qrcode({
                    render: "canvas",
                    width: 150, //宽度
                    height:150, //高度
                    text: toUtf8(tel)
                });
            });
        }
</script>

</html>